<html xmlns="http://www.w3.org/1999/xhtml">
	<title>Kalendarz dzien</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta http-equiv="Content-Language" content="en">
    <meta http-equiv="Cache-Control" content="public">
    <link href="../calendar.css" rel="stylesheet">
<link href="../main.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>

<body>     
<div class="header">
	<h1>Laboratorium Laparoskopii</h1>
</div>

<div class="middleContent">
    <div class="inner">
        <div class="containerBox">
			<div class="sideColumn">
			<ul>
				<li>Witaj <span class="name">Opiekunie</span>!</li>
				</ul>
				<ul>
					<li >Stanowiska i narzedzia</li>
					<li  class="active">Kalendarz</li>
					<li  >Wyloguj</li>
				</ul>
            </div>
            <div class="mainColumn">
				<div class="switcher">
					<div class="actions">
						<div class="button"><input type="button" class="previous" value="Poprzedni"/></div>
						<div class="button name"><span>1</span></div>
						<div class="button"><input type="button" class="next" value="Nastepny"/></div></div>
					</div>
				<div class="button"><input type="button" value="Dodaj"/></div>
				<div id="day-list">
					<div "hours">
						<div class="hour" id="hour7"><span>7:00</span></div>
						<div class="hour" id="hour8"><span>8:00</span></div>
						<div class="hour" id="hour9"><span>9:00</span></div>
						<div class="hour" id="hour10"><span>10:00</span></div>
						<div class="hour" id="hour11"><span>11:00</span></div>
						<div class="hour" id="hour12"><span>12:00</span></div>
						<div class="hour" id="hour13"><span>13:00</span></div>
						<div class="hour" id="hour14"><span>14:00</span></div>
						<div class="hour" id="hour15"><span>15:00</span></div>
						<div class="hour" id="hour16"><span>16:00</span></div>
						<div class="hour" id="hour17"><span>17:00</span></div>
						<div class="hour" id="hour18"><span>18:00</span></div>
						<div class="hour" id="hour19"><span>19:00</span></div>
						<div class="hour" id="hour20"><span>20:00</span></div>
					</div>
					<div class="stations">
						<div class="station" id="station1">
							<ul>
								<li><strong>Nazwa:</strong> <span>Stanowisko 1.</span></li>
								<li><strong>Prowadzacy:</strong> <span>brak</span></li>
								<li><strong>Uzytkownikow:</strong> <span>0/20</span></li>
								<li><strong>Narzedzia:</strong> <span>Narzedzie 1., Narzedzie 2.<span></li>
							</ul>
							<div class="actions">
								<div class="button"><input type="button" value="Edytuj"/></div>
								<div class="button"><input type="button" value="Usun"/></div>
								<div class="button"><input type="button" value="Konserwacja"/></div>
							</div>
						</div>
						<div class="station" id="station2">
							<ul>
								<li><strong>Nazwa:</strong> <span>Stanowisko 2.</span></li>
								<li><strong>Prowadzacy:</strong> <span>brak</span></li>
								<li><strong>Uzytkownikow:</strong> <span>5/20</span></li>
								<li><strong>Narzedzia:</strong> <span>Narzedzie 2., Narzedzie 3.<span></li>
							</ul>
							<div class="actions">
								<div class="button"><input type="button" value="Edytuj"/></div>
								<div class="button"><input type="button" value="Usun"/></div>
								<div class="button"><input type="button" value="Konserwacja"/></div>
							</div>
						</div>
					</div>
				</div>
				
            </div>
            
        </div>
    </div>
</div>
<script>
function drawStation(divId,startHour, startMinutes, stopHour, stopMinutes, columnCount, drawingColumn){
// godzina ma 60px wiec startMinutes stopMinutes mozna po prostu sumowac
var width=675;
var div=$(divId);
var top=$("#hour"+startHour).position().top;
var left=$("#hour"+startHour).position().left;
var bottom=$("#hour"+stopHour).position().top;
div.css("top",top+startMinutes);
div.css("left",left+50+(width/columnCount*drawingColumn));
div.css("right",left+50+(width/columnCount*(drawingColumn+1)));
div.css("bottom",-bottom-stopMinutes);
}
$(document).ready(function() {
	//stanowisko pierwsze jest dostepne od 9:30 do 18:00, rysowane w pierwszej kolumnie
	drawStation("#station1",9,30,18,0,2,0);
	//stanowisko pierwsze jest dostepne od 12:30 do 19:22, rysowane w drugiej kolumnie
	drawStation("#station2",12,30,19,22,2,1);
});
</script>
</body>
</html>